    <head>
        <?php include_http_metas() ?>
        <?php include_metas() ?>
        <title>
            <?php include_slot('title', 'Serag MS') ?>
        </title>
        <link href="<?= image_path('favicon.ico') ?>" type="image/x-icon" rel="shortcut icon" />
        <?php include_stylesheets() ?>
        <?php include_javascripts() ?>
    </head>

<body>
    <div id="loadingBar" class="loading" style="display: none;"></div><p id="loadingBarp" class="loadingp" style="display: none;">Loading ...</p>
<!-- Left side content -->
<div id="leftSide">
    <div class="logo"><a href="<?= url_for('default/index') ?>"><?= image_tag('logo.png'); ?></a></div>
    
    <div class="sidebarSep"></div>

    <!-- General balance widget -->
<!--    <div class="genBalance">
        <a class="amount" title="" href="#">
            <span>General balance:</span>
            <span class="balanceAmount">$10,900.36</span>
        </a>
        <a class="amChanges" title="" href="#">
            <strong class="sPositive">+0.6%</strong>
        </a>
    </div>
    
     Next update progress widget 
    <div class="nextUpdate">
        <ul>
            <li>Next update in:</li>
            <li>23 hrs 14 min</li>
        </ul>
        <div class="pWrapper"><div title="78%" class="progressG" style="width: 78%;"></div></div>
    </div>
    
    <div class="sidebarSep"></div>-->
    
    <!-- Left navigation -->
    <ul class="nav" id="menu">
        <li class="dash"><a href="<?= url_for('default/index') ?>"><span>Home</span></a></li>
        
        <li class="customers"><a class="exp inactive" title="" href="javascript:void(0)"><span>Customers</span></a>
            <ul class="sub" style="display: none;">
                <li><a title="" href="javascript:void(0)" onClick="showAllCustomers();">Show All Customers</a></li>
                <li><a title=""  href="javascript:void(0)" onClick="addCustomer();">Add Customer</a></li>
<!--                <li><a title=""  href="javascript:void(0)" onClick="addContact();">Add Contact</a></li>-->
            </ul>
        </li>
        
        <li class="products"><a class="exp inactive" title="" href="javascript:void(0)"><span>Products</span></a>
            <ul class="sub" style="display: none;">
                <li><a title="" href="<?= url_for('product/index') ?>">Show All Products</a></li>
                <li><a title=""  href="javascript:void(0)" onClick="addProduct();">Add Product</a></li>
            </ul>
        </li>
        
        <li class="visits"><a href="<?= url_for('default/index') ?>"><span>Visits</span></a></li>
        
        <li class="charts"><a class="exp inactive" title="" href="javascript:void(0)"><span>Reports</span></a>
            <ul class="sub" style="display: none;">
                <li><a title="" href="javascript:void(0)" onClick="showStatements();">Statements</a></li>
                <li><a title="" href="javascript:void(0)" onClick="showDueSheets();">Due Sheets</a></li>
            </ul>
        </li>

        <li class="recp"><a class="exp inactive" title="" href="javascript:void(0)"><span>Recipients</span></a>
            <ul class="sub" style="display: none;">
                <li><a title="" href="<?= url_for('user/index') ?>">Show All Recipients</a></li>
                <li><a title="" href="<?= url_for('user/addUser') ?>">Add Recipients</a></li>
            </ul>
        </li>
        
    </ul>
</div>

<!-- Right side -->
<div id="rightSide">
   <!-- Top fixed navigation -->
    <div class="topNav">
        <div class="wrapper">
            <div class="welcome"><?= image_tag('userPic.png'); ?>Welcome, <a style="color: #F0B17C"> <?= $sf_user->getAttribute('Username') ?> !</a></div>
            <div class="userNav">
                <ul>
                    <li><a href="javascript:void(0)" title=""><?= image_tag('profile.png'); ?><span>Profile</span></a></li>
                    <li><a href="javascript:void(0)" title=""><?= image_tag('tasks.png'); ?><span>Tasks</span></a></li>
                    <li><a href="javascript:void(0)" title=""><?= image_tag('settings.png'); ?><span>Settings</span></a></li>
                    <li><a href="<?= url_for('login/logout') ?>"><?= image_tag('logout.png'); ?><span>Logout</span></a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Title area -->
    <div class="titleArea">
        <div class="wrapper">
            <div class="pageTitle">
                <h5>Serag Dashboard</h5>
                <span>Serag dashboard management system.</span>
            </div>
            <div class="middleNav">
                <ul>
                    <li class="mUser"><a title=""><span class="users tipN" original-title="Manage Recipients"></span></a>
                        <ul class="mSub1">
                            <li><a href="javascript:void(0)" title="">Add user</a></li>
                            <li><a href="javascript:void(0)" title="">Show All Users</a></li>
                        </ul>
                    </li>
                    <li class="mMessages"><a title=""><span class="statistics tipN" original-title="Reports"></span></a></li>
                    <li class="mMessages"><a href="javascript:void(0)" onClick="addCollection();" title=""><span class="collection tipN" original-title="Collections"></span></a></li>
                    <li class="mOrders"><a title=""><span class="orders tipN" original-title="Invoices"></span></a>
                        <ul class="mSub4">
                            <li><a href="javascript:void(0)" onClick="addInvoice();" title="">Add Invoice</a></li>
                            <li><a href="javascript:void(0)" title="">Show All Invoices</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    
       <div class="line"></div>
       
       <div class="wrapper" id="DAH">
           <?php echo $sf_content ?>
       </div>
       
<!-- Footer line -->
<div id="footer">
    <div class="wrapper">© Serag Management System, 2013 - All rights reserved.</div>
</div>
</div>

<div style="position: absolute; display: none;" class="limiterBox" id="limiterBox"></div></body>
<input type="hidden" value="<?php echo url_for('invoice/addInvoice') ?>"  id="url4AddInvoice"/>
<input type="hidden" value="<?php echo url_for('invoice/editInvoice') ?>"  id="url4EditInvoice"/>
<input type="hidden" value="<?php echo url_for('product/addProduct') ?>"  id="url4AddProduct"/>
<input type="hidden" value="<?php echo url_for('customer/addCustomer') ?>"  id="url4AddCustomer"/>
<input type="hidden" value="<?php echo url_for('customer/index') ?>"  id="url4SowAllCustomers"/>
<input type="hidden" value="<?php echo url_for('customer/addContact') ?>"  id="url4AddContact"/>
<input type="hidden" value="<?php echo url_for('customer/customerBrief') ?>"  id="url4CustomerBrief"/>
<input type="hidden" value="<?php echo url_for('customer/deleteCustomer') ?>"  id="url4CustomerDelete"/>
<input type="hidden" value="<?php echo url_for('collection/addCollection') ?>"  id="url4AddCollection"/>
<input type="hidden" value="<?php echo url_for('collection/editCollection') ?>"  id="url4EditCollection"/>
<input type="hidden" value="<?php echo url_for('report/statement') ?>"  id="url4Statements"/>
<input type="hidden" value="<?php echo url_for('report/dueSheets') ?>"  id="url4DueSheets"/>
<input type="hidden" value="<?php echo url_for('customer/showCustomer') ?>"  id="url4showCustomer"/>
<input type="hidden" value="<?php echo url_for('customer/editCustomer') ?>"  id="url4editCustomer"/>